<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ShowDisaster</title>
    <link rel="stylesheet" href="/Trees/LayUiBac/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-container">
    <div class="layui-row">
        <h1>事件信息添加</h1>



        <form class="layui-form" action="">

            <div class="layui-form-item">
                <label class="layui-form-label">事件名称</label>
                <div class="layui-input-block">
                    <input type="text" name="thingName" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <label class="layui-form-label">起始时间</label>
            <input type="text" class="layui-input" name="time" id="time" style="width: 100px">

<!--            <div class="layui-form-item">-->
<!--                <label class="layui-form-label">发生时间</label>-->
<!--                <div class="layui-input-block">-->
<!--                    <input type="text" name="time" required lay-verify="required"-->
<!--                           autocomplete="off" class="layui-input">-->
<!--                </div>-->
<!--            </div>-->

            <div class="layui-form-item">
                <label class="layui-form-label">灾情阶段</label>
                <div class="layui-input-block">
                    <select name="state" id="state" lay-verify="required">
                        <option value="已经控制" selected>已经控制</option>
                        <option value="防治中">防治中</option>
                        <option value="需求专家">需求专家</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">灾情描述</label>
                <div class="layui-input-block">
                    <input type="text" name="describe" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">灾情类型</label>
                <div class="layui-input-block">
                    <select name="type" id="type" lay-verify="required">
                        <option value="虫害" selected>虫害</option>
                        <option value="鼠害">鼠害</option>
                        <option value="病害">病害</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">初步损失</label>
                <div class="layui-input-block">
                    <input type="text" name="lose" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">目前方案</label>
                <div class="layui-input-block">
                    <input type="text" name="method" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">发现途径</label>
                <div class="layui-input-block">
                    <select name="found" id="found" lay-verify="required">
                        <option value="小班巡查发现" selected>小班巡查发现</option>
                        <option value="公众发现">公众发现</option>
                        <option value="上级部门通报">上级部门通报</option>
                    </select>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">影响面积</label>
                <div class="layui-input-block">
                    <input type="text" name="size" required lay-verify="required"
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">所属区域</label>
                <div class="layui-input-block">
                    <select name="area" id="area" lay-verify="required">

                    </select>
                </div>
            </div>


        </form>
    </div>
</div>


<script src="/Trees/LayUiBac/layui/layui.js"></script>
<script>
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#time' //指定元素
        });

    });
</script>
<script>
    //Demo
    layui.use(['form','jquery','layer'],function () {
        let form = layui.form;
        let layer = layui.layer;
        let $ = layui.$;
        form.render();
        let x ='<option value=""></option>';

        $.ajax({
            type:"post"
            ,url:"/Trees/classManage?method=showAllClass"
            ,dataType:'json'
            ,success:function (data) {
                console.log(data)
                for(let i of data){
                    x+="<option value="+i.pkId+">"+i.area+"</option>"
                }

                $('#area').html(x);
                form.render('select');
            }
        })

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });
</script>
</body>
</html>